<!--  -->
<template>
  <ql-card>
    <template #header>
      时间选择器,省市区联动选择器,下拉选择输入框,词典选择器
    </template>
    <template #search>
      <el-form
        inline
        :model="listParams"
        :disabled="loading"
      >
        <!-- 引入组件TimeChange，组件为form表单，绑定ref属性，通过this.$refs[ref_name].getTime()，获取时间 -->
        <app-time-change ref="time" />

        <!-- 省市区多级联动，leaf: 向下选择等级默认是2，@change获取选项完整新增 -->
        <!-- <el-form-item label="活动区域：">
          <app-city-cascader
            v-model="city"
            :options="cityOptions"
          />
        </el-form-item> -->

        <!-- 下拉选择输入框 width: select宽度  默认110px，绑定ref属性，通过this.$refs[ref_name].getValue()，获取值 -->
        <el-form-item>
          <app-select-input
            ref="selectInput"
            width="80px"
            :options="selects"
          />
        </el-form-item>
        <!-- 词典数据类型查询 车辆等父子联动需要在子类别中传入父pid -->
        <!-- 为了保证父级改变字级清空,主动触发change事件清空字级 -->
        <!-- <el-form-item label="车辆类型：">
          <app-dict-list
            v-model="dict.dictId"
            v-model:name="dict.dictName"
            type="vehicle_category"
            @change="()=> {dict.dictChildId = ''; dict.dictChildName=''}"
          />
          <app-dict-list
            v-model="dict.dictChildId"
            v-model:name="dict.dictChildName"
            :pid="dict.dictId"
            type="vehicle_type"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </ql-card>
</template>
<script setup>
import { useRequest } from 'qin-lantern'
// 模拟接口延时
let delayedTime = null
const delayed = (data) => {
  return new Promise((resolve, reject) => {
    delayedTime = setTimeout(() => {
      resolve(data)
      clearTimeout(delayedTime)
      delayedTime = null
    }, 2000)
  })
}

const [loading, send] = useRequest(delayed)

const listParams = reactive({})

const time = ref(null)

const dict = ref({
  dictId: '',
  dictName: '',
  dictChildId: '',
  dictChildName: ''
})

const selectInput = ref(null)
const onSubmit = async () => {
  // 模拟获取时间范围数据, 城市三级联动数据, 公共数据词典选择器
  console.log(time.value.getTime(), city.value, selectInput.value.getValue(), dict.value)

  send()
}

// 城市联动选择
const city = ref({
  // province: '', // 省
  // city: '', // 市
  // district: '', // 区
  // provinceCode: '', // 省Code
  // cityCode: '', // 市Code
  // districtCode: '' // 区Code
  city: '北京市',
  cityCode: 110100,
  district: '东城区',
  districtCode: 110101,
  province: '北京',
  provinceCode: 110000
})

// 字段名配置项 默认是以下配置
// const cityOptions = {
//   province: 'province', // 省
//   city: 'city', // 市
//   district: 'district', // 区
//   provinceCode: 'provinceCode', // 省Code
//   cityCode: 'cityCode', // 市Code
//   districtCode: 'districtCode' // 区Code
// }

// 下拉选择输入框
const selects = reactive([
  {
    value: 'name',
    label: '姓名'
  },
  {
    value: 'phone',
    label: '电话'
  }
])
</script>

<style scoped lang='scss'>

</style>
